<template>
  <div id="app">
    <el-card shadow="hover">
      <el-table
          :data="studentList"
          style="width: 100%">
        <el-table-column
            label="学号"
            prop="sid"
            align="center"
            width="180">
        </el-table-column>
        <el-table-column
            label="姓名"
            align="center"
            prop="sname">
        </el-table-column>
        <el-table-column
            label="性别"
            align="center"
            prop="sex">
        </el-table-column>
        <el-table-column
            label="年龄"
            align="center"
            prop="age">
        </el-table-column>
        <el-table-column
            label="住址"
            align="center"
            prop="addr">
        </el-table-column>
        <el-table-column
            label="所在班级"
            align="center"
            prop="cname">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页导航-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>

  </div>
</template>

<script>
export default {
  data() {
    return {
      studentList: [],      // 当前页的所有学生信息集合
      page:1,               // 当前页
      pageSize:5,           // 每页大小
      total:100,            // 总记录数
    }
  },
  created() {

    // 1. 进行分页查询
    this.findStudents()
  },

  methods: {
    // 1. 查询所有学生
    findStudents(){
      this.$axios.get('/ssm_02_war/student/list.do')
          .then(res => {
            // this.studentList = res.data;
            console.log("数据：",res.data)
            this.studentList = res.data
          })
    },
    // 2. 进行分页查询
    findByPage(page, pageSize) {
      this.$axios.get(`/student/findByPage.do?page=${page}&pageSize=${pageSize}`).then(res => {
        console.log("分页数据：", res.data);
        this.studentList = res.data.rows;  // 获取学生数据列表
        this.total = res.data.total;  // 获取总记录数
      }).catch(error => {
        console.error("请求数据失败", error);
      });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 每页大小改变时事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.findByPage(this.page,this.pageSize)
    },
    // 当前页改变时事件
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.findByPage(this.page,this.pageSize)
    }
  }
}
</script>
<style>
  .el-card{
    width: 90%;
    margin: 0 auto;
  }
  .el-pagination{
    text-align: right;
    margin-top: 15px;
  }
</style>
